<template>

  <el-container>
    <el-header>
      <div class="header-content">
        <img style="height: 150px;width: 150px" src="@/logo.png" alt="Logo" class="header-logo">
        <div>
          <img src="@/img.png" alt="Logo-text" style="height: 45px;margin-top: 30px" class="header-logotext">
          <p STYLE="width: 1000px;margin-left: 10px;margin-top: 10px">NEUSOFT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SMART&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMUNITY</p>
        </div>
      </div>
      <el-button type="text" class="login-link" @click="toLoginPage">已有账号？请登录</el-button>
    </el-header>

    <el-main>
      <div class="register-box">
        <h3>注册</h3>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

          <p style=" margin-bottom: 5px;margin-top: 20px">用户名</p>
          <el-input style="height: 40px;margin-top: 0px;" placeholder="请输入用户名" type="text" v-model="ruleForm.name"
                    autocomplete="off"></el-input>
          <div>
            <p style="margin-bottom: 5px;margin-top: 10px">邮箱</p>
            <el-input style="height: 40px;margin-top: 0px" placeholder="请输入邮箱" type="email"
                      v-model="ruleForm.email" autocomplete="off"></el-input>
          </div>
          <p style="margin-bottom: 5px;margin-top: 10px">手机号</p>
          <el-input style="height: 40px;margin-top: 0px" placeholder="请输入手机号" type="tel" v-model="ruleForm.phone"
                    autocomplete="off"></el-input>

          <p style="margin-bottom: 5px;margin-top: 10px">密码</p>
          <el-input style="height: 40px;margin-top: 0px" placeholder="请输入密码" type="password"
                    v-model="ruleForm.passWord" autocomplete="new-password"></el-input>

          <p style="margin-bottom: 5px;margin-top: 10px">确认密码</p>
          <el-input style="height: 40px;margin-top: 0px" placeholder="请确认密码" type="password"
                    v-model="ruleForm.confirmPassword" autocomplete="new-password"></el-input>

          <el-form-item>
            <el-button style="margin-left: 10px;width: 300px;height: 30px;margin-top: 10px" type="primary"
                       @click="submitForm('ruleForm')">注册
            </el-button>

          </el-form-item>
        </el-form>
      </div>
    </el-main>
    <el-footer>
      <div class="footer-text">
        <p>©2024 XXXX公司所有｜XX网安备00000000000000｜XICP备2024000000号-0</p>
      </div>
    </el-footer>
  </el-container>

</template>
<script>
import *as Register from "../api/loginAPI"
export default {
  data() {
    // 验证函数
    var checkPhone = (rule, value, callback) => {
      const phoneRegex = /^1[3-9]\d{9}$/; // 简单的手机号验证正则表达式
      setTimeout(() => {
        if (!value) {
          callback(new Error('手机号不能为空'));
        } else if (!phoneRegex.test(value)) {
          callback(new Error('请输入正确的手机号'));
        } else {
          callback();
        }
      }, 1000);
    };

    return {
      ruleForm: {
        name: '',
        email: '',
        phone: '',
        passWord: '',
        confirmPassword: ''
      },

      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        email: [
          {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'}
        ],
        phone: [
          {validator: checkPhone, trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '密码长度应为6到20位', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请再次输入密码', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ]
      },
      // tableData:[]
    };
  },
  methods: {
    toLoginPage() {
      this.$router.push('/login'); // 假设/login是登录页面的路由路径
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {

          // 获取表单数据
          const formData = {...this.ruleForm}; // 使用展开运算符创建ruleForm的浅拷贝

          // 发送POST请求到服务器
          Register.registerAPI(formData).then((res) => {
            if (res.data.code == 2000) {
              alert("注册成功");
              this.$router.push('login');
            }
          })
          // 这里可以添加注册成功的逻辑，如发送请求到服务器
        } else {
          console.log('注册失败!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
.el-container {
  height: 100vh; /* 让容器高度充满整个视口 */
  display: flex;
  flex-direction: column; /* 改变主轴方向为垂直 */
}

.el-header {
  flex: 0 0 15%; /* header占据20%高度，且不缩放 */
  line-height: 1; /* 重置line-height，避免继承影响 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 调整为两端对齐，以便在两侧放置元素 */
  padding: 0 20px; /* 添加内边距以防止内容贴近边缘 */
}

.el-footer {
  flex: 0 0 10%; /* footer占据10%高度，且不缩放 */
  line-height: 1; /* 同上 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.el-main {
  flex: 1; /* main占据剩余空间 */
  display: flex; /* 使main支持Flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 20px; /* 添加内边距 */
}

.register-box {
  width: 100%;
  max-height: 600px;
  max-width: 550px; /* 限制表单盒子的最大宽度 */
  border: 1px solid #000; /* 设置边框为浅绿色，宽度为1px */
  border-radius: 5px; /* 为盒子添加圆角效果 */
  padding: 30px; /* 为盒子内部添加内边距 */
}

.header-logo {
  float: left; /* 或使用display: inline-block; 并设置适当的margin-right来与其他元素保持间距 */
  width: 100px; /* 根据实际需要调整图片宽度 */
  height: auto; /* 保持图片的宽高比 */
  margin-right: 10px; /* 可选，根据需要调整与旁边文本的间距 */
}

.header-content {
  display: flex;
  align-items: center;
  position: absolute;
  left: 10%; /* 图片和标题距离左侧20% */
  width: 60%; /* 可根据实际情况调整，确保内容不会溢出 */
}

.login-link {
  position: absolute;
  right: 10%; /* 文字距离右侧5% */
  transform: translateY(-50%);
  color: #606266; /* 根据需要调整字体颜色 */
  cursor: pointer;
  top: auto; /* 移除之前的垂直居中设置 */
  margin-top: 10px; /* 添加顶部外边距，根据实际情况调整 */
}

.login-link:focus,
.login-link:hover {
  text-decoration: underline;
}

.footer-text {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 左对齐 */
  width: 100%;
  padding-left: 5%; /* 距离左侧10% */
}

.demo-ruleForm .el-form-item__content {
  line-height: 1; /* 增加行高以适应放大后的表单 */
}

.demo-ruleForm .el-input__inner {
  height: 48px; /* 假设原始高度为32px，这里调整为48px作为示例 */
  font-size: 16px; /* 增大字体大小 */
}

/* 如果有按钮调整，例如 */
.demo-ruleForm .el-button {
  height: 48px; /* 与输入框高度一致，保持协调 */
  font-size: 16px; /* 字体大小同步增大 */
}

</style>